<template>
  <div class="login-container">
    <Header :title="type === 'login' ? '登录' : '注册'" />
    <img class="logo" src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png" />
    <div v-show="type === 'login'" class="login-body login">
      <van-form @submit="onSubmit">
        <van-field
          v-model="mobile"
          name="mobile"
          label="手机号"
          placeholder="手机号"
          :rules="[{required: true, message: '请填写手机号'}]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{required: true, message: '请填写密码'}]"
        />
        <van-field
          center
          clearable
          label="验证码"
          placeholder="输入验证码"
          v-model="verify"
        >
          <template #button>
            <ImgVerify ref="verifyRef" />
          </template>
        </van-field>
        <div style="margin:16px">
          <div class="link-register" @click="toggle('register')">立即注册</div>
          <van-button round block :color="themeStore.primaryColor" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
    <div v-show="type !== 'login'" class="login-body register">
      <van-form @submit="onSubmit">
        <van-field
          v-model="Rmobile"
          name="Rmobile"
          label="手机号"
          placeholder="手机号"
          :rules="[{required: true, message: '请填写手机号'}]"
        />
        <van-field
          v-model="Rpassword"
          type="Rpassword"
          name="Rpassword"
          label="密码"
          placeholder="密码"
          :rules="[{required: true, message: '请填写密码'}]"
        />
        <van-field
          center
          clearable
          label="验证码"
          placeholder="输入验证码"
          v-model="verify"
        >
          <template #button>
            <ImgVerify ref="verifyRef" />
          </template>
        </van-field>
        <div style="margin: 16px">
          <div class="link-login" @click="toggle('login')">登录已有账号</div>
          <van-button round block :color="themeStore.primaryColor" native-type="submit">注册</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {Toast} from 'vant'
import md5 from 'js-md5'
import useThemeStore from '@/store/theme'
import useUserStore from '@/store/user'
import {login, register} from '@/service/user'
import {setToken} from '@/utils/local'
import ImgVerify from '@/components/imageVerify'

const themeStore = useThemeStore()
const userStore = useUserStore()

const verifyRef = ref(null)
const mobile = ref('')
const password = ref('')
const Rmobile = ref('')
const Rpassword = ref('')
const verify = ref('')
const imgCode = ref('')
const type = ref('login')

// 登录、注册切换
function toggle(t) {
  type.value = t
  verify.value = ''
}
// 点击登录、注册 
async function onSubmit(values) {
  imgCode.value = verifyRef.value.imgCode || ''
  if (imgCode.value.toLowerCase() !== verify.value.toLowerCase()) {
    Toast.fail('验证码有误')
    return
  }
  if (type.value === 'login') {
    await userStore.login({
      "loginName": values.mobile,
      "passwordMd5": md5(values.password)
    })
  } else {
    await register({
      "loginName": values.Rmobile,
      "password": values.Rpassword
    })
    Toast.success('注册成功')
    type.value = 'login'
    verify.value = ''
  }
}
</script>

<style lang="less" scoped>
.login-container {
  .logo {
    width: 120px;
    height: 120px;
    display: block;
    margin: 80px auto 20px;
  }
  .login-body {
    padding: 0 20px;
  }
  .login {
    .link-register {
      font-size: 14px;
      margin-bottom: 20px;
      color: #1989fa;
      display: inline-block;
    }
  }
  .register {
    .link-login {
      font-size: 14px;
      margin-bottom: 20px;
      color: #1989fa;
      display: inline-block;
    }
  }
  .verify-bar-area {
    margin-top: 24px;
    .verify-left-bar {
      border-color: #1baeae;
    }
    .verify-move-block {
      background-color: #1baeae;
      color: #fff;
    }
  }
  .verify {
    >div {
      width: 100%;
    }
    display: flex;
    justify-content: center;
    .cerify-code-panel {
      margin-top: 16px;
    }
    .verify-code {
      width: 40%!important;
      float: left!important;
    }
    .verify-code-area {
      float: left!important;
      width: 54%!important;
      margin-left: 14px!important;
      .varify-input-code {
        width: 90px;
        height: 38px!important;
        border: 1px solid #e9e9e9;
        padding-left: 10px;
        font-size: 16px;
      }
      .verify-change-area {
        line-height: 44px;
      }
    }
  }
}
</style>